<template>
   <!-- 订单面积滚动变动效果 -->
    <div class="scroll-warpper">
      <!-- 循环订单面积的每一个值 -->
      <div class="scroll-item" v-for="(item, index) in num_list" :key="index">
        <!-- 每个值都通过过滤器进行处理，处理的结果返回一个类名 例如 scroll-num-warpper num-1  如果是点 就是 scroll-num-warpper num-dot-->
        <div :class="item | classesFilter">
          <span class="scroll-num">.</span>
          <span class="scroll-num">0</span>
          <span class="scroll-num">1</span>
          <span class="scroll-num">2</span>
          <span class="scroll-num">3</span>
          <span class="scroll-num">4</span>
          <span class="scroll-num">5</span>
          <span class="scroll-num">6</span>
          <span class="scroll-num">7</span>
          <span class="scroll-num">8</span>
          <span class="scroll-num">9</span>
        </div>
      </div>
    </div>
</template>
 
<script>
export default {
  props: {
    value: {
      type: String,
      default: '0.00'
    }
  },
  filters: {
    classesFilter(value) {
      console.log("过滤的值："+value);
      //判断是. 还是数值，
      let newvalue = value === '.' ? 'dot' : value
      //拼接一个类名,通过这个类名来控制数值显示
      return `scroll-num-warpper num-${newvalue}`
    }
  },
  computed: {
    num_list() {
      //this.value 是从父组件传过来的订单面积值
      //toString 把订单面积转换为字符串，然后把字符串用split分隔成数组
      return this.value.toString().split('')
    }
  }
}
</script>
 
<style lang="scss" scoped>
.scroll-warpper {
  display: inline-block;
  vertical-align: middle;
  transition-duration: .3s;
  .scroll-item {
    overflow: hidden;
    height: 20px;
    float: left;
    margin: 0 0px;
    .scroll-num-warpper {
      transform: translateY(20px);
      transition-duration: 1s;
      &.num-dot {
        margin-right: -6px;
        transform: translateY(0);
      }
      &.num-0 {
        transform: translateY(-20px);
      }
      &.num-1 {
        transform: translateY(-40px);
      }
      &.num-2 {
        transform: translateY(-60px);
      }
      &.num-3 {
        transform: translateY(-80px);
      }
      &.num-4 {
        transform: translateY(-100px);
      }
      &.num-5 {
        transform: translateY(-120px);
      }
      &.num-6 {
        transform: translateY(-140px);
      }
      &.num-7 {
        transform: translateY(-160px);
      }
      &.num-8 {
        transform: translateY(-180px);
      }
      &.num-9 {
        transform: translateY(-200px);
      }
      .scroll-num {
        height: 20px;
        padding: 0px;
        line-height: 20px;
        display: block;
        font-weight: 700;
        color: #fe6700;
        font-size: 24px;

      }
    }
  }
}
</style>